<template>
  <div class="message">
    <div ref="vido" class="video-list-box"></div>
    <!-- <div ref="vido2" class="video-list-box1"></div> -->
    <!-- <video src :id="videoId" class="tset_video"></video> -->
    <div class="test_div">
      <button @click="start">开启视频会议</button>
      <!-- <button @click="getdom">会议人员</button> -->
    </div>
    <div class="user_position">
      <div class="user_box" v-for="item in userList" :key="item.id">
        <div class="title_name">{{item.userName}}</div>
        <div class="flag" v-if="item.host" @click="needHost" title="申请主持人">
          <img src="../../../static/img/flag.png" alt />
        </div>
      </div>
    </div>
    <div ref="odiv"></div>
  </div>
</template>
<script>
// import io from "socket.io-client";
export default {
  props: ["userList", "userId", "userName", "hostFlag", "videoRoomId"],
  data() {
    return {
      videoDomId: null,
      host: 0,
      videoConference: null
      // videoRoomId: 129//window.localStorage.getItem("roomid")
    };
  },
  watch: {
    videoRoomId: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        console.log(newV, oldV)
        this.videoRoomId = newV
        var videoList = this.$refs.vido;
        var liveVideoList = this.$refs.odiv;
        // let videoList = document.getElementById('videoList')
        // let liveVideoList = document.getElementById('odiv')
        let cert = 'a3d2aef58ca4460c';
        let hostCert = 'xxxxxxxx';
        let isHost = true;
        let isMain = true;
        let isDebug = true;
        let userInfo = {
          "headImage": "https://wwwwwwwwwwwwwwwwww"
        };
        let userName = window.localStorage.getItem("username");
        this.videoConference = new VideoConference(videoList, liveVideoList, userName, 2, userInfo, this.videoRoomId,
          cert, hostCert, isMain, isHost, isDebug);
        this.$nextTick(() => {
          // console.log('./////////////')
          // this.videoConference.initialize();
        });
      },
      deep: true
    },
    hostFlag: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        console.log(newV, oldV)
        this.$nextTick(() => {
          // this.scrollToBottom();
          console.log('zzz')
        });
      },
      deep: true
    },
    userList: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        console.log(newV, oldV)
        this.$nextTick(() => {
          // this.scrollToBottom();
          console.log('zzz')
        });
      },
      deep: true
    },
    userId: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        console.log(newV, oldV)
        this.$nextTick(() => {
          // this.scrollToBottom();
          console.log('zzz')
        });
      },
      deep: true
    },
    userName: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        console.log(newV, oldV)
        this.$nextTick(() => {
          // this.scrollToBottom();
          console.log('zzz')
        });
      },
      deep: true
    },
  },
  mounted() {
    // this.getVideoRoom();
  },
  methods: {
    start() {
      console.log(this.videoConference)

      this.videoConference.initialize();
    },
    needHost() { // 申请主持人
      console.log(this.userList, '............')
      for (let i = 0; i < this.userList.length; i++) { // 查看当前人员是否为主持人
        if (this.userId == this.userList[i].userId) {
          this.host = this.userList[i].host;
        }
      }
      console.log(this.host)
      if (this.host == 1) { // 主持人自己申请，给予提示
        this.$message({
          message: '您已是主持人，请勿重复申请',
          type: 'warning'
        });
        return;
      }
      let obj = { // 申请主持人接口参数
        type: 'host',
        data: {
          userId: this.userId,
          userNmae: this.userName
        }
      };
      console.log(this.hostFlag);
      if (!this.hostFlag) { // 因为不可同时申请，需判断当前无人申请
        this.$parent.websocketsend(obj);
        // this.hostFlag = true;
      } else {
        this.$message({
          message: '参会人员正在申请，请稍后再试',
          type: 'warning'
        });
      }
    }
  }
}
</script>
<style scoped>
.flag {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 25px;
  overflow: hidden;
  cursor: pointer;
}
.flag img {
  width: 60%;
}
.title_name {
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  display: inline-block;
  height: 30px;
  text-align: left;
  line-height: 30px;
  padding-left: 10px;
}
.user_box {
  width: 130px;
  height: 30px;
  position: relative;
  margin-bottom: 5px;
}
.user_position {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 130px;
}
.message {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 66;
}
.video-list-box {
  padding: 5px;
  float: left;
  width: 480px;
  overflow-y: scroll;
  height: 100%;
  overflow: auto;
}

/* 1列  */
.video-list-box {
  column-count: 1;
}

/* 2列  */
@media (min-width: 1200px) {
  .video-list-box {
    -moz-column-count: 2;
    /* Firefox */
    -webkit-column-count: 2;
    /* Safari 和 Chrome */
    column-count: 2;
  }
}

/* 3列  */
@media (min-width: 2000px) {
  .video-list-box {
    -moz-column-count: 3;
    /* Firefox */
    -webkit-column-count: 3;
    /* Safari 和 Chrome */
    column-count: 3;
  }
}

/* 单一视频容器的样式 */
.video-container {
  break-inside: avoid;
  box-sizing: border-box;
  border: 1px solid #eee;
  position: relative;
  margin-bottom: 5px;
}

/*========================瀑布流  End================*/

/* 视频video标签的样式 */
.video-style {
  width: 100%;
  -webkit-column-break-inside: avoid;
}

/* 在视频上显示用户名时的样式 */
.video-user-name {
  top: 0px;
  background: #000;
  opacity: 0.3;
  position: absolute;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 100%;
  color: #fff;
}
</style>